<!DOCTYPE html> 
<html>
<head>
<title>munggah mudun nganggo jQuery</title>
<style type='text/css'>
	body {
		font-family: Arial;
		font-size: 14px;
	}
	h1 {
		font-size: 20px;
		margin: 0;
		padding: 0 0 12px 0;
	}
	p {
		margin-top: 0;
	}
	#ngisor {
		margin-top: 200%;
	}
	#nduwur a, #ngisor a {
		color: red;
		font-size: 17px;
	}
	
/* down link */
#mudun {
position: fixed;
bottom: 0;
right:1px;
top: 50px;
height: 20px;
clear: both;
margin: 0;
overflow: hidden;
}
    /* top link */
    #munggah {
    position: fixed;
    bottom: 0;
    right:0;
    z-index: 100;
    width: 30px;
    height: 37px;
    clear: both;
    margin: 0;
    overflow: hidden;
    border:1px solid rgb(20, 79, 105);
    box-shadow: 0 0 0 1px rgb(36, 147, 196) inset, 0px 1px 3px black;
    border-radius: 10px 0px 0px 0px;
    }
    #munggah a {
    float: right;
    margin: 0;
    padding: 0;
    }
    #munggah a.disik {
    float: right;
    }	
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
	function scrollToBottom() {
		$('html, body').animate({scrollTop:$(document).height()}, 'slow');
	}
	function scrollToTop() {
		$('html, body').animate({scrollTop:0}, 'slow');
	}
	
//mudun
$(document).ready(function(){$("#mudun").click(function(){$("html, body").animate({scrollTop:$(document).height()},"fast");return false})});

//munggah
$(window).scroll(function() { if($(this).scrollTop() > 300) { $('#munggah').fadeIn(); } else { $('#munggah').fadeOut(); } }); $('#munggah').hide().click(function() { $('html, body').animate({scrollTop:0}, 900); return false; });	
</script>
</head>

<body>

	<h1>Mudun nganggo jQuery</h1>
	<p>iki cuman halaman demo, tutor e nok link ngisore iki cuy:<br />
	  - <a href="http://herryuntitledz.blogspot.com/2013/08/cara-membuat-tombol-back-to-top-auto.html">munggah nganggo jQuery</a><br />
	  - <a href="#">mudun nganggo jQuery</a>
	</p>
	
<div id="mudun"> 
<a href='#ngisor' title='mudun maneh cuy'>
<img alt="mudun" src='http://4.bp.blogspot.com/-R9I_Hmw9xl0/UhShatWv8rI/AAAAAAAABDs/gjHN-UyJDfw/s1600/mudun.png'/></a>
</div>
	<p id="nduwur"><a href="javascript:scrollToBottom()">Scroll to bottom</a></p>
	<p id="ngisor"><a href="javascript:scrollToTop()">Scroll to top</a></p>
<div id='munggah' style='' title='munggah cuy.!'>
<a class='munggah disik' href='#nduwur'> 
<img alt='munggah' src='http://2.bp.blogspot.com/-LvRkMNmBlss/UduN-kbzB2I/AAAAAAAAAsA/xKnmUYCWdVI/s1600/top-arrow.png'/> 
</a> 
</div>	
	
</body>
</html>